<template>
    <div>
		<div style="clear:both;"></div>

		<!-- 页面头部 start -->
		<div class="header w990 bc mt15">
			<div class="logo w990">
				<h2 class="fl"><a href="index.html"><img src="~/assets/images/logo.png" alt="京西商城"></a></h2>
				<div class="flow fr">
					<ul>
						<li class="cur">1.我的购物车</li>
						<li>2.填写核对订单信息</li>
						<li>3.成功提交订单</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 页面头部 end -->

		<div style="clear:both;"></div>

       <!-- 主体部分 start -->
		<div class="mycart w990 mt10 bc">
			<h2><span>我的购物车</span></h2>
			<table>
				<thead>
					<tr>
						<th></th>
						<th class="col1">商品名称</th>
						<th class="col2">商品信息</th>
						<th class="col3">单价</th>
						<th class="col4">数量</th>
						<th class="col5">小计</th>
						<th class="col6">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(v,k) in carts" :key="k">
						<td><input type="checkbox" v-model="v.checked"></td>
						<td class="col1"><a href=""><img :src="v.midlogo" alt="" /></a> <strong><a href="">{{v.goods_name}}</a></strong></td>
						<td class="col2">
							<p>{{v.spec_info}}</p>
						</td>
						<td class="col3">￥<span>{{v.price}}</span></td>
						<td class="col4">
							<a href="javascript:;" @click.prevent="munis(k)" class="reduce_num"></a>
							<input type="text" @change="updateCart(k)" v-model="v.count" class="amount" />
							<a href="javascript:;" @click.prevent="plus(k)" class="add_num"></a>
						</td>
						<td class="col5">￥<span>{{(Number(v.price*v.count)).toFixed(2)}}</span></td>
						<td class="col6"><a href="" @click.prevent="deleCart(k)">删除</a></td>
					</tr>
					<tr v-if="carts.length==0">
						<td colspan="7" style="width:50px"> <strong>亲，购物车中没有数据，请添加购物车</strong></td>
					</tr>
				</tbody>
				
				<tfoot>
					<tr>
						<td colspan="7">购物金额总计： <strong>￥ <span id="total">{{Number(totalPrice).toFixed(2)}}</span></strong></td>
					</tr>
				</tfoot>
			</table>
			<div class="cart_btn w990 bc mt10">
				<a href="" class="continue">继续购物</a>
				<a href="" class="checkout" @click.prevent="submit">结 算</a>
			</div>
		</div>
		<!-- 主体部分 end -->
    </div>
</template>

<script>

import cartApi from '~/api/cart.js'

import '~/assets/style/footer.css'
import '~/assets/style/cart.css'


export default {
    data(){
        return{
            carts: [],
			buyCount: 1,
			token:''
        }
    },
    created(){
        console.log(11111)
        //判断此时用户是否处于登录状态
        if (this.token != null) {
            //此时处于登录状态
            //登录状态，购物车数据从服务器查询出来的
            //mock模拟服务端数据
            //api发送查询请求
            //展示服务器端购物车数据
            cartApi.findCarts().then(res=>{
                this.carts = res.data.carts;
                console.log(JSON.stringify(this.carts))
            })

        } else {
            //直接从localStorage中获取购物车数据即可
            var cart = localStorage.getItem("cart");
            console.log(cart)
            
            //判断
            if(cart==null){
                cart = [];
            }

            //把购物车列表字符串转换成json对象
            this.carts = JSON.parse(cart);
        }
    },
	methods: {
		//提交订单
		submit:function(){

			//判断用户是否登录
			//此时提交订单，进入结算页面，用户必须处于登录状态，否则不能进行操作
			if(this.token){
				//直接跳转到结算页面
				// location.href = "flow2.html";
				this.$router.push('/order/flow2')
			}else{
				//未登录，跳转到登录页面去登录，登录成功后，必须回到结算页面
				//记录需要跳转的地址，记录结算页面
				localStorage.setItem("returnURL","/order/flow2");
				//在跳转到登录页面
				// location.href = "login.html";
				this.$router.push('/login')
			}

		},
		//购物车列表商品数据数量加1
		plus: function (k) {
			//对此角标位置的商品加1
			this.carts[k].count++;

			//调用修改购物车方法即可
			this.updateCart(k);

			//把改变后的购物车列表存储到localStorage
			//localStorage.setItem("cart", JSON.stringify(this.carts));

		},
		//购物车列表商品数据数量减1
		munis: function (k) {
			//判断
			if (this.carts[k].count <= 1) {
				return;
			}
			this.carts[k].count--;

			//调用修改方法
			this.updateCart(k);

			//把改变后的购物车列表存储到localStorage
			//localStorage.setItem("cart", JSON.stringify(this.carts));
		},
		//手动更新购物车商品数量，然后把此商品保存到localStorage
		updateCart: function (k) {

			//判断用户是否处于登录状态
			//!=null 1，!=null 2,!=undefined
			if(this.token!=null){
				//处于登录状态
				//skuid: 表示修改那个商品
				//count：修改的数量
				//checked:是否选中状态
				updateCart({skuid:this.carts[k].skuid,count:this.buyCount,checked:this.carts[k].checked}).then(res=>{
					//判断是否成功
					if(res.data.errno==0){
						alert("修改成功");
					}else{
						alert(res.data.errmsg);
					}
				})

				return;
			}

			//把改变后的购物车列表存储到localStorage
			localStorage.setItem("cart", JSON.stringify(this.carts));
		},
		//删除购物车列表中某个商品
		deleCart: function (k) {

			//先删除数据
			this.carts.splice(k, 1);

			//判断此时用户是否处于登录状态
			if(this.token!=null){
				//此时用户处于登录状态
				//调用删除购物车方法
				dele(this.carts[k].skuid).then(res=>{
					//判断删除成功
					if(res.data.errno==0){
						//删除成功
						alert("删除成功");
					}else{
						alert(res.data.errmsg);
					}
				})

				return;
			}

		
			//重新把更新后的购物车数据存储在localStorage
			localStorage.setItem("cart", JSON.stringify(this.carts));
		}

	},
    mounted(){
        this.token = localStorage.getItem("token")
    },
	computed: {
		//计算总价格
		totalPrice: function () {
			var totalPrice = 0;
			//循环购物车所有商品，计算总价格
			for (var i = 0; i < this.carts.length; i++) {

				//判断此商品此时是否处于选中状态
				if (this.carts[i].checked) {
					//只计算选中状态的商品的价格
					totalPrice += this.carts[i].price * this.carts[i].count;
				}

			}

			return totalPrice;
		}
	}
}
</script>

<style>

</style>
